<template>
  <div class="top-bar">
    <div class="logo">
      <h3>光谷智慧交通</h3>
      <i class="iconfont icon-zhihuijiaotong"></i>
    </div>

    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-menu-item index="1">实时路况</el-menu-item>
      <el-sub-menu index="2">
        <template #title>事件查询</template>
        <el-menu-item index="2-1" @click="callQueryEvent">查询事件</el-menu-item>
        <el-menu-item index="2-2">添加事件</el-menu-item>
        <el-menu-item index="2-3">更新事件</el-menu-item>
      </el-sub-menu>
      <el-menu-item index="3">发布公告</el-menu-item>
      <el-menu-item index="4">路况信息</el-menu-item>
      <el-sub-menu index="5">
        <template #title>工具箱</template>
        <el-menu-item index="5-1">距离测量</el-menu-item>
        <el-menu-item index="5-2">面积测量</el-menu-item>
        <el-menu-item index="5-3">导出图片</el-menu-item>
      </el-sub-menu>
      <el-menu-item index="6">
        <el-input
          v-model="input"
          style="width: 240px"
          placeholder="碰撞"
          class="event-find"
        />
        <el-button type="primary">查询</el-button>
      </el-menu-item>
      <el-menu-item index="7">
        <el-select v-model="value" style="width: 240px" placeholder="">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-menu-item>
      <el-menu-item index="8">
        <el-button type="success">复位地图</el-button>
      </el-menu-item>
    </el-menu>
  </div>
</template>
<script setup>
import { onMounted, getCurrentInstance ,defineProps} from "vue"
const props = defineProps({  
    // 声明 queryEvent prop，它是一个函数  
    queryEvent: {  
        type: Function,  
        required: true  
    }  
}) 

const callQueryEvent=()=>{
    props.queryEvent();
}

</script>
<style scoped>
.event-find {
  margin-right: 10px;
}

.top-bar {
  background-color: white;
  display: flex;
  align-items: center;
  position: fixed;
  width: 100vw;
  z-index: 999;
  top: 0;
  left: 0;
}

:deep(.icon-zhihuijiaotong) {
  font-size: xx-large;
  color: red;
  margin-right: 10px;
}

.el-menu-demo {
  width: 80%;
}

.logo {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
